<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>


    <style type="text/css">
        #tx {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline;
            position: absolute;
            top: 7px;
            left: 3px;
        }

        .member_info {
            float: left;
            width: 14%;
            margin-left: 2%;
            background-color: #FFFFFF;
        }

        .group_member {
            /*border-bottom:1px solid #EFEFEF;*/
            /*margin:0px 15px*/
            background-color: #FFFFFF;

        }

        .member_info div {
            margin: 10px 0px;
        }

        .meber_nickname {
            color: #000000;
            padding: 2px;
            text-align: center;
            font-size: 14px
        }
        .aui-switch:checked{
          background-color: #4FAF6A;
          border: solid 1px #4FAF6A;
        }
        *{
          -webkit-box-sizing: inherit;
                  box-sizing: inherit;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
  <div id="blank" class="header">
      <div v-back.tapmode class="back"></div>
      <span class="title">申请加入家族</span>
  </div>
     <div class="group-info-header" style="background:#5569AE;text-align:center;color:#ffffff;width:95%;border-radius:10px;margin:0 auto;margin-top:60px;padding-bottom:30px">
       <div style="width:40%;margin:0 auto;margin-top:10px;padding-top:30px"><img :src="groupinfo.portrait ? groupinfo.portrait : '../../image/qer.png'" width="60%" style="border-radius:4px"></div>
       <div style="font-size:18px;margin-top:10px">{{groupinfo.clan_name}}</div>
       <div style="padding:2px 6px;border:1px solid #ffffff;border-radius:3px;width:23%;margin:0 auto;background:#ffffff;color:#5569AE;margin-top:5px;font-size:12px">{{groupinfo.name}}</div>

     </div>
    <div class="group_top_info" style="margin-top:15px">
      <ul class="aui-list aui-list-in " >
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">家族ID</div>
                  <div class="aui-list-item-right">{{groupinfo.clan_unique_id}}</div>
              </div>
          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">创建时间</div>
                  <div class="aui-list-item-right">{{groupinfo.date_add| date2}}</div>
              </div>
          </li>
        </ul>
          <!-- <ul class="aui-list aui-media-list" style="margin-top:5px">
          <li class="aui-list-item aui-list-item-arrow ">
              <div class="aui-media-list-item-inner" v-myclick="annonce">
                  <div class="aui-list-item-inner">
                      <div class="aui-list-item-text">
                          <div class="aui-list-item-title">家族公告</div>
                      </div>
                      <div class="aui-list-item-text aui-ellipsis-2">
                          {{groupinfo.notice}}
                      </div>
                  </div>
              </div>
          </li>
        </ul> -->
        <ul class="aui-list aui-list-in" style="margin-top:5px">
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">家族长老</div>
                    <div class="aui-list-item-right">
                        <div class="aui-badge" style="position:relative;top:0; left:0;background-color:#ffffff;color:#999999">共{{groupinfo.managers.length}}名长老</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="group_member">
        <div class="member_info" v-myclick="[content.member_id, member_info]" v-for="(content, index) in groupinfo.managers">
            <div class="member_avatar"><img style="border-radius:5px" v-image-resize="{src:content.portrait?content.portrait:'../res/tx00.jpg'}"></div>
            <!-- <div class="meber_nickname">{{content.name}}</div> -->
        </div>
        <div style="clear:both"></div>
        </div>
    </div>
		<div style="margin:20px 0px;padding:15px;background-color:#ffffff;color:#FF5151;text-align:center" v-myclick="[groupinfo.clan_id,apply]">
			申请加入家族
		</div>
</div>
</body>
<script src="../../script/api.js"></script>

<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script type="text/javascript">
    var groupinfo;
    apiready = function () {
        setBSImg();
        groupinfo = api.pageParam.item;
        initApp();
        api.parseTapmode();
    };

		function initApp() {

        vm = new Vue({
            el: '#app',
            data: {
                groupinfo:groupinfo,
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                },
            },
            computed: {
            },
            methods: {
              member_info:function(uid){
                // openWin('../win/win_member_info',{uid:uid,group_id:api.pageParam.group_id})
              },
              apply:function(group_id){
                api.openWin({
                  reload : true,
                  name : 'verify',
                  url : '../user/verify.html',
                  pageParam : {
                    target_id : group_id,
                    target_type:2,
                    from_type: api.pageParam.from_type
                  },
                  vScrollBarEnabled : false,
                });
              },
              showall:function(group_id){
                openWin('../win/win_group_members',{group_id: group_id})
              },
              annonce:function() {
                openWin('../home/announcement',{group_id:api.pageParam.group_id})
              },
            }

        });
    }
    function closeWin() {
      api.closeWin({
      });
    }
</script>
</html>
